<template>
  <div class="main">
    <div class="u-title">
      <h3>
          <span class="f-ff2">
            <p class="fp-13">TA的动态</p>
            <p>（{{ size }}）</p>
          </span>
      </h3>
    </div>
    <div class="g-bd1">
      <div class="g-mn1">
        <div class="g-wrap10">
          <div class="n-nmusic" v-if="size==0">
            <h3 class="f-ff2">
              <i class="icon"></i>
              暂时还没有动态
            </h3>
          </div>
          <div class="m-timeline" v-else>
            <ul class="m-dlist">
              <li v-for="(item,index) in events" :key="index">
                <div class="gface">
                  <router-link :to="{name:'UserDetailView',params:{id:item.user.userId,type:1}}" class="ficon" :title="item.user.nickname">
                    <img v-lazy="item.user.avatarUrl" alt="">
                  </router-link>
                </div>
                <div class="gcnt">
                  <div class="dcntc">
                    <div class="f-fs1">
                      <router-link :to="{name:'UserDetailView',params:{id:item.user.userId,type:1}}"
                                   :title="item.user.nickname"
                                   class="s-fc7">{{ item.user.nickname }}</router-link>
                      <span class="new-wrap" v-if="item.user.avatarDetail">
                        <img :src="item.user.avatarDetail.identityIconUrl" alt="">

                      </span>
                      <span class="sep" v-if="item.json.song">分享单曲</span>
                      <span class="sep" v-if="item.json.mv">分享MV</span>
                      <span class="sep" v-if="item.json.playlist">分享歌单</span>
                    </div>
                    <div class="time">
                      <a href="#" class="s-fc4">{{ formatDate(item.eventTime) }}</a>
                    </div>
                    <div class="text">
                      {{ item.json.msg }}
                      <br>
                      <router-link :to="{name:'Activity',query:{id:item.actId}}" class="s-fu2" v-if="item.actName">
                        {{ '#' + item.actName + '#' }}
                      </router-link>
                    </div>
                    <div class="j-flag">
                      <div id="auto-id-T4MuaMrn8TCDdCLh" v-if="item.json.song">
                        <div class="src">
                          <div class="cover">
                            <span class="lnk">
                              <img
                                  :src="item.json.song.album.picUrl"
                                  alt="">
                              
                            </span>
                            <a href="javascript:;" class="ply" @click.prevent="sendSong(item.json.song)" title="播放"></a>
                          </div>
                          <div class="scnt">
                            <h3 class="tit">
                              <router-link :to="{name:'SongDetail',params:{id:item.json.song.id}}" :title="item.json.song.name" class="songname">{{ item.json.song.name }}</router-link>
                            </h3>
                            <h4 class="from">
                              <router-link :to="{name:'Work',params:{id:item.json.song.album.artists[0].id}}" :title="item.json.song.album.artists[0].name">
                                {{ item.json.song.album.artists[0].name }}
                              </router-link>
                            </h4>
                          </div>
                        </div>
                      </div>
                      <div id="auto-id-ngHZrl2s5lTSUMGG" v-if="item.json.playlist">
                        <div class="src">
                          <div class="cover">
                            <router-link class="lnk" :to="{name:'RecommendDetail',params:{id: item.json.playlist.id}}" :title="item.json.playlist.name">
                              <img :src="item.json.playlist.coverImgUrl" alt="">

                            </router-link>
                            <a href="javascript:;" title="播放" class="ply-1" @click.prevent="addSong(item.json.playlist.id)"></a>
                          </div>
                          <div class="scnt">
                            <h3 class="tit">
                              <span class="tag">
                                歌单
                                <i class="icon-7"></i>
                              </span>
                              <router-link :to="{name:'RecommendDetail',params:{id: item.json.playlist.id}}" :title="item.json.playlist.name" class="songname">
                                {{ item.json.playlist.name }}
                              </router-link>
                            </h3>
                            <h4 class="from">
                              <span>by</span>
                              <router-link :to="{name:'UserDetailView',params:{id:item.json.playlist.creator.userId,type:1}}" :title="item.json.playlist.creator.nickname">
                                {{ item.json.playlist.creator.nickname }}
                              </router-link>
                            </h4>
                          </div>
                        </div>
                      </div>
                      <div id="auto-id-DIqHGavM3ntpfMak" v-if="item.pics!==false">
                        <ul class="pics" v-if="liIndex!=index">
                          <li class="img-he" v-if="item.pics.length==1" v-for="(pic,i) in item.pics" :key="i">
                            <img v-lazy="pic.originUrl" alt="">
                          </li>
                          <li :class="i==0||i==3||i==6?'clear':''" v-for="(pic,i) in item.pics" :key="i"
                              v-if="item.pics.length>1" @click="nexPic(pic,i,item.pics,index)">
                            <img v-lazy="pic.squareUrl" alt="" class="img-w">
                          </li>
                        </ul>
                        <div class="showpic" v-if="liIndex==index">
                          <div class="btns">
                            <a href="javascript:;" @click.prevent="liIndex=-1">
                              <i class="icon-1"></i>
                              <span>收起</span>
                            </a>
                            <span class="line">|</span>
                            <a href="javascript:;">
                              <i class="icon-2"></i>
                              <span>查看原图</span>
                            </a>
                            <span class="line">|</span>
                            <a href="javascript:;">
                              <i class="icon-3"></i>
                              <span>下载</span>
                            </a>
                          </div>
                          <div class="slide">
                            <div class="wrap">
                              <img :src="pic" alt="" class="img-12">
                              <span class="left" @click="pre()">
                                <img src="../../../assets/左箭头.png" alt="">
                              </span>
                              <span class="right" @click="nex()">
                                <img src="../../../assets/右箭头.png" alt="">
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="auto-id-yLDJquTDtqSkXMbq" v-if="item.json.mv">
                        <div class="src-video">
                          <div class="video">
                            <div class="info">
                              <div class="u-dicn">
                                <p class="f-thide2">
                                  <i class="icon-12"></i>
                                  <span class="f-pre">{{ item.json.mv.name }}</span>
                                  <span class="h12">-
                                    <span>
                                      <a href="#" v-for="(n,p) in item.json.mv.artists">{{ n.name }}
                                      <span v-if="p!=item.json.mv.artists.length-1">/&nbsp;</span>
                                      </a>

                                    </span>
                                  </span>
                                </p>
                              </div>
                              <div class="bottom">
                                <span class="f-fl">
                                  <i class="icon-13"></i>
                                  {{ formatNumber(item.json.mv.playCount) }}
                                </span>
                              </div>
                              <i class="f-alpha"></i>
                            </div>
                            <img
                                :src="item.json.mv.imgurl16v9"
                                alt="" class="img">
                          </div>

                        </div>
                      </div>

                    </div>
                    <div class="doper">
                      <a href="javascript:;">
                        <i class="icon-1"></i>
                        <span>({{ item.info.likedCount }})</span>
                      </a>
                      <span class="line">|</span>
                      <a href="javascript:;">
                        <span>转发({{ item.info.shareCount }})</span>
                      </a>
                      <span class="line">|</span>
                      <a href="javascript:;">
                        <i class="icon-2"></i>
                        <span>评论({{ item.info.commentCount }})</span>
                      </a>
                    </div>
                    <div class="arrow"></div>
                    <div class="dsup"></div>
                    <div class="f-hide"></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="g-sd1">
        <div class="g-wrap11">
          <h3 class="u-hd4">TA的关注</h3>
          <ul class="m-gz">
            <li v-for="(p,o) in follow" :key="o">
              <router-link :to="{name:'UserDetailView',params:{id:p.userId,type:1}}" :title="p.nickname" class="msk">
                <img :src="p.avatarUrl" alt="">
              </router-link>
              <p>
                <router-link :to="{name:'UserDetailView',params:{id:p.userId,type:1}}" :title="p.nickname" class="f-thide">{{p.nickname}}</router-link>
                <img :src="p.avatarDetail.identityIconUrl" alt="" v-if="p.avatarDetail">
              </p>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {formatDate} from "@/utils/formatDate";
import {formatNumber} from "@/utils/formatNumber";
import {reqSongListDetail} from "@/http/api";

export default {
  name: "index",
  data() {
    return {
      events: [],
      size: '',
      formatDate: formatDate,
      formatNumber: formatNumber,
      pic: '',
      showImg: true,
      picIndex: 0,
      picList: [],
      follow:[],
      liIndex:-1
    }
  },
  methods: {
    async addSong(id) {
      let result = await reqSongListDetail(id)
      let list = result.data.playlist.tracks
      this.$store.commit('track/addMusic', list)
      this.$store.commit('track/SETMUSIC', list[0])
    },
    sendSong(i){
      this.$store.commit('track/SETMUSIC',i)
    },
    nexPic(pic, i, list,index) {
      this.pic = pic.squareUrl
      this.picList = list
      this.picIndex = i
      this.showImg = false
      this.liIndex = index
    },
    nex() {
      let index = this.picIndex + 1
      if (index == this.picList.length)  index = 0
      this.pic = this.picList[index].squareUrl
      this.picIndex = index
    },
    pre() {
      let index = this.picIndex - 1
      if (index == -1) index = this.picList.length - 1
      this.pic = this.picList[index].squareUrl
      this.picIndex = index
    },
    async getFollows() {
      let result = await this.$API.reqFollows(this.$route.query.id)
      this.follow = result.data.follow.slice(0,6)
    },
    async getEvent() {
      let result = await this.$API.reqEvent(this.$route.query.id)
      this.size = result.data.size
      let list = result.data.events
      list.forEach(item => {
        let obj = {
          info: item.info,
          user: item.user,
          json: JSON.parse(item.json),
          tailMark: item.tailMark,
          eventTime: item.eventTime,
          actName: item.actName,
          actId:item.actId,
          pics: item.pics
        }
        this.events.push(obj)
      })
    }
  },
  mounted() {
    this.getEvent()
    this.getFollows()
  }


}
</script>

<style scoped lang="less">
.main {
  width: 900px;
  height: auto;
  overflow: hidden;
  margin: 0 auto;

  .u-title {
    width: 900px;
    height: 33px;
    margin: 0 auto;
    position: relative;
    border-bottom: 2px solid #c20c0c;

    h3 {
      line-height: 28px;
      float: left;
      font-size: 20px;
      font-weight: normal;

      .f-ff2 {

        display: inline-block;
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;

        p {
          float: left;
        }

        .fp-13 {
          position: relative;
          margin-right: 10px;
        }
      }
    }
  }

  .g-bd1 {
    width: 900px;
    border: none;
    min-height: 700px;
    _height: 700px;
    margin: 0 auto;
    display: flex;
    background-color: #fff;

    .g-mn1 {
      width: 649px;
      float: left;
      flex: 1;
      border-right: 1.5px solid #DBDBDB;

      .g-wrap10 {
        padding: 10px 25px 0 0;

        .n-nmusic {
          padding: 105px 0 105px 0;
          text-align: center;

          .f-ff2 {
            font-weight: normal;
            padding-bottom: 38px;
            font-size: 18px;
            margin-top: -2px;

            .icon {
              margin-right: 17px;
              width: 64px;
              height: 50px;
              background-position: 0 -347px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../../assets/icon.png");
            }
          }
        }

        .m-timeline {

          .m-dlist {
            position: relative;
            zoom: 1;

            li {
              border-top: none;
              position: relative;
              padding: 20px 0;
              border-bottom: 1px solid #e8e8e9;

              .gface {
                position: absolute;
                left: 0;
                width: 54px;

                .ficon {
                  float: left;
                  position: relative;
                  zoom: 1;
                  width: 45px;
                  height: 45px;

                  img {
                    display: block;
                    width: 100%;
                  }
                }
              }

              .gcnt {
                position: relative;
                zoom: 1;
                margin-left: 55px;
                padding-top: 4px;

                .dcntc {
                  .f-fs1 {
                    font-size: 14px;

                    .s-fc7 {
                      color: #0c73c2;
                    }

                    .new-wrap {
                      position: relative;
                      display: inline-block;
                      width: 15px;
                      height: 15px;
                      margin: 2px 0 0 2px;
                      vertical-align: top;

                      img {
                        top: 0;
                        left: 0;
                        width: 15px;
                        height: 15px;
                      }
                    }

                    .sep {
                      margin-left: 5px;
                      color: #666;
                    }
                  }

                  .time {
                    margin-top: 7px;

                    .s-fc4 {
                      color: #999;
                    }
                  }

                  .text {
                    margin-top: 10px;
                    line-height: 24px;
                    font-size: 14px;
                    word-wrap: break-word;
                    word-break: break-word;
                    white-space: normal;

                    .s-fu2 {
                      color: #0c73c2;
                      text-decoration: none;
                    }
                  }

                  .j-flag {
                    #auto-id-T4MuaMrn8TCDdCLh, #auto-id-ngHZrl2s5lTSUMGG {
                      width: 569px;
                      height: 60px;
                      background: #f5f5f5;

                      .src {

                        display: block;
                        position: relative;
                        padding: 10px;
                        margin: 4px 0 5px;

                        .cover {
                          position: relative;
                          zoom: 1;
                          width: 40px;
                          height: 40px;
                          float: left;
                          &:hover .ply-1{
                            display: block;
                          }

                          .lnk {
                            display: inline-block;
                            width: 100%;
                            height: 100%;
                            img {
                              width: 40px;
                              height: 40px;
                            }

                          }
                          .ply-1 {
                            display: none;
                            z-index: 200;
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 40px;
                            height: 40px;
                            margin: 0;
                            background-position: -100px -70px;
                            _background-position: 0 0;
                            opacity: 0.8;
                            filter: Alpha(opacity=80);
                            background-image: url("../../../assets/frd_dyn_sprite.png");
                          }
                          .ply {
                            display: block;
                            z-index: 200;
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 40px;
                            height: 40px;
                            margin: 0;
                            background-position: -100px -70px;
                            _background-position: 0 0;
                            opacity: 0.8;
                            filter: Alpha(opacity=80);
                            background-image: url("../../../assets/frd_dyn_sprite.png");
                          }
                        }

                        .scnt {
                          display: block;
                          position: absolute;
                          top: 10px;
                          left: 60px;
                          right: 30px;
                          height: 40px;
                          line-height: 22px;

                          .tit {
                            font-weight: normal;
                            margin-top: -2px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            word-wrap: normal;

                            .tag {
                              position: relative;
                              top: -1px;
                              zoom: 1;
                              padding: 0 2px 0 3px;
                              background-position: -110px 0;
                              line-height: 16px;
                              margin-right: 6px;
                              color: #e03f40;
                              display: inline-block;
                              height: 16px;
                              font-size: 12px;
                              background-image: url("../../../assets/frd_dyn_sprite.png");

                              .icon-7 {
                                position: absolute;
                                top: 0;
                                right: 0px;
                                display: block;
                                width: 3px;
                                background-position: right 0;
                                height: 16px;
                                font-size: 12px;
                                background-image: url("../../../assets/frd_dyn_sprite.png");

                              }
                            }

                            a {
                              color: #333;
                            }
                          }

                          .from {
                            font-weight: normal;
                            color: #666;

                            a {
                              color: #666;
                            }
                          }
                        }
                      }
                    }

                    #auto-id-DIqHGavM3ntpfMak {
                      margin-top: 5px;
                      width: 569px;
                      height: auto;
                      overflow: hidden;

                      .pics {
                        //display: none;
                        .clear {
                          clear: left;
                        }

                        .img-he {
                          clear: left;
                          width: auto !important;
                          height: auto !important;
                          background-color: transparent;

                          img {
                            min-width: 170px;
                            max-height: 338px;
                            height: auto;
                          }
                        }

                        li {
                          float: left;
                          position: relative;
                          zoom: 1;
                          margin-left: 4px;
                          margin-top: 4px;
                          background-color: #e5e5e5;

                          width: 110px;
                          height: 110px;


                          .img-w {
                            position: absolute;
                            top: 0;
                            left: 0;
                            display: block;
                            width: 110px;
                            height: 110px;
                          }
                        }
                      }

                      .showpic {
                        //display: none;
                        background: #f5f5f5;
                        height: auto;
                        overflow: hidden;

                        .btns {
                          padding: 12px 0 12px 20px;
                          line-height: normal;

                          .line {
                            color: #ddd;
                            margin: 0 7px 0 10px;
                          }

                          a {
                            color: #666;

                            i {
                              margin: 1px 2px 0 0;
                              display: inline-block;
                              vertical-align: top;
                              background-image: url("../../../assets/frd_dyn_sprite.png");

                            }

                            .icon-1 {
                              width: 13px;
                              height: 13px;
                              background-position: -108px -19px;

                            }

                            .icon-2 {
                              width: 13px;
                              height: 13px;
                              background-position: -180px -20px;
                            }

                            .icon-3 {
                              width: 14px;
                              height: 13px;
                              background-position: -45px -58px;
                            }

                            span {

                            }
                          }
                        }

                        .slide {
                          height: auto;
                          overflow: hidden;
                          width: 525px;
                          padding-top: 1px;
                          min-height: 306px;
                          _height: 306px;
                          margin: 0 auto;

                          .wrap {
                            margin-top: 0;
                            position: relative;

                            &:hover .left {
                              display: block;
                            }

                            &:hover .right {
                              display: block;
                            }

                            .left {
                              width: 40px;
                              height: 40px;
                              position: absolute;
                              top: 50%;
                              left: 20px;
                              display: none;
                              cursor: pointer;

                              img {
                                width: 40px;
                                height: 40px;
                              }
                            }

                            .right {
                              cursor: pointer;
                              display: none;
                              position: absolute;
                              top: 50%;
                              right: 20px;
                              width: 40px;
                              height: 40px;

                              img {
                                width: 40px;
                                height: 40px;

                              }
                            }

                            .img-12 {
                              display: block;
                              min-width: 100px;
                              min-height: 100px;
                              max-width: 100%;
                              margin: 0 auto;
                            }
                          }
                        }
                      }
                    }

                    #auto-id-yLDJquTDtqSkXMbq {
                      margin-top: 5px;

                      .src-video {
                        padding: 0;
                        background: none !important;

                        .video {
                          width: 338px;
                          height: 189px;
                          position: relative;
                          zoom: 1;

                          .info {
                            z-index: 10;
                            left: 0;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            position: absolute;
                            box-sizing: border-box;
                            color: #fff;
                            cursor: pointer;
                            background: rgba(0, 0, 0, 0.1);

                            .u-dicn {
                              width: 100%;
                              box-sizing: border-box;
                              font-size: 12px;
                              line-height: 15px;
                              padding: 10px;
                              height: 100px;
                              background-image: url("../../../assets/frd_cover_mask.png");

                              .f-thide2 {
                                max-height: 30px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;

                                .icon-12 {
                                  margin-right: 4px;
                                  width: 21px;
                                  height: 12px;
                                  background-position: 0 -210px;
                                  display: inline-block;
                                  vertical-align: top;
                                  background-image: url("../../../assets/frd_dyn_sprite.png");
                                }

                                .f-pre {
                                  word-wrap: break-word;
                                  word-break: break-all;
                                  width: 100%;
                                  box-sizing: border-box;
                                  font-size: 12px;
                                  line-height: 15px;
                                  padding: 10px;
                                  height: 100px;
                                }

                                .h12 {
                                  color: rgba(255, 255, 255, 0.5);

                                  a {
                                    color: rgba(255, 255, 255, 0.5);
                                  }
                                }
                              }
                            }

                            .bottom {
                              position: absolute;
                              left: 0;
                              right: 0;
                              bottom: 0;
                              padding: 33px 10px 10px;
                              height: 10px;
                              line-height: 10px;
                              font-size: 14px;
                              background-image: url("../../../assets/frd_cover_mask.png");
                              display: inline-block;
                              vertical-align: top;

                              .f-fl {
                                float: left;

                                .icon-13 {
                                  width: 8px;
                                  height: 10px;
                                  background-position: -50px -510px;
                                  margin-right: 13px;
                                  display: inline-block;
                                  vertical-align: top;
                                  background-image: url("../../../assets/frd_dyn_sprite.png");
                                }
                              }
                            }

                            .f-alpha {
                              position: absolute;
                              top: 50%;
                              left: 50%;
                              margin: -20px 0 0 -20px;
                              opacity: 0.8;
                              width: 40px;
                              height: 40px;
                              background-position: 0 -510px;
                              background-image: url("../../../assets/frd_dyn_sprite.png");
                            }
                          }
                        }

                        .img {
                          display: block;
                          width: 100%;
                          height: 100%;
                        }
                      }
                    }
                  }

                  .doper {
                    margin: 18px 0 -2px;
                    text-align: right;
                    line-height: normal;

                    .line {
                      color: #c7c7c7;
                      margin: 0 10px 0 12px;
                    }

                    a {
                      color: #0c73c2;

                      span {
                        color: #0c73c2;
                      }

                      .icon-1 {
                        margin: 0px 3px 0 0;
                        width: 14px;
                        height: 14px;
                        background-position: 0 -20px;
                        display: inline-block;
                        vertical-align: top;
                        background-image: url("../../../assets/frd_dyn_sprite.png");
                      }
                    }
                  }

                  .arrow {

                  }

                  .dsup {
                  }

                  .f-hide {

                  }
                }
              }
            }
          }
        }
      }
    }

    .g-sd1 {
      width: 250px;
      height: 700px;
      float: right;

      .g-wrap11 {
        padding: 10px 0 0 25px;

        .u-hd4 {
          height: 23px;
          margin-bottom: 15px;
          border-bottom: 1px solid #ccc;
        }

        .m-gz {
          margin: 0px 0 0 -16px;
          height: auto;
          overflow: hidden;

          li {
            float: left;
            width: 64px;
            height: 105px;
            padding-left: 16px;
            margin-right: 16px;

            .msk {
              text-decoration: none;
              color: #333;

              img {
                display: block;
                width: 64px;
                height: 64px;
              }
            }

            p {
              margin-top: 5px;
              width: 64px;

              .f-thide {
                max-width: 70%;
                display: inline-block;
                _width: 100%;
                vertical-align: middle;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;

              }

              img {
                height: 13px;
                width: 13px;
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
      }

    }
  }
}
</style>